<template>
    <div class="left-top-container">
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, toRaw } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 订单占比数据
const orderData = ref<Array<{
    value: number,
    name: string

}>>([
    { value: 0, name: '快递订单' },
    { value: 0, name: '商超订单' },
    { value: 0, name: '医药订单' },
    { value: 0, name: '生鲜订单' },
    { value: 0, name: '冷链订单' },
    { value: 0, name: '村镇订单' },
])


const initChart = () => {
    if (!chartRef.value) return

    chartInstance = echarts.init(chartRef.value)

    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params: any) {
                return params.seriesName + '<br/>' + params.name + ': ' + Math.floor(params.percent) + '%'
            }
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        series: [
            {
                name: '订单占比',
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#233343',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    color: '#fff',
                    textBorderWidth: 0,
                    textBorderColor: 'transparent',
                    formatter: function(params: any) {
                        return params.name + ': ' + Math.floor(params.percent) + '%'
                    }
                },
                labelLine: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                },
                data: orderData.value,
                color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
            }
        ]
    }

    chartInstance.setOption(option)
}

const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize()
    }
}

onMounted(() => {
    setTimeout(() => {
        initChart()
    }, 1000)
    window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose()
    }
    window.removeEventListener('resize', resizeChart)
})

const getData = (data: any) => {
    let obj = JSON.parse(data)
    orderData.value.forEach((item: any) => {
        if(item.name == '快递订单'){
            item.value = Number(obj.expressOrder)
        }else if(item.name == '商超订单'){
            item.value = Number(obj.retailOrder)    
        }else if(item.name == '医药订单'){
            item.value = Number(obj.medicalOrder)
        }else if(item.name == '生鲜订单'){
            item.value = Number(obj.freshOrder)
        }else if(item.name == '冷链订单'){
            item.value = Number(obj.coldChainOrder)
        }else if(item.name == '村镇订单'){
            item.value = Number(obj.ruralOrder)
        }
    })

}

defineExpose({
    getData
})

</script>

<style scoped lang="less">
.left-top-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-container {
    flex: 1;
    width: 100%;
    min-height: 200px;
}
</style>